<template>
  <view
    class="tui-list-class tui-list-cell flex-row align-center flex-item"
    :class="[
      unlined ? 'tui-cell-unlined' : '',
      lineLeft ? 'tui-line-left' : '',
      lineRight ? 'tui-line-right' : '',
      radius ? 'tui-radius' : ''
    ]"
    :hover-class="hover ? 'hover' : ''"
    :style="{ backgroundColor: backgroundColor, fontSize: size + 'rpx', color: color, padding: padding,height,borderRadius }"
    :hover-stay-time="70"
    @tap="handleClick"
  >
    <!-- #ifdef APP-NVUE -->
    <view class="tui-list-box flex-row flex-item align-center">
      <!-- #endif -->
      <view class="flex-item">
        <slot />
      </view>
      <!-- #ifndef APP-NVUE -->
      <text v-if="arrow" class="tbb-arrow-right margin-left-20" :class="['tbb-arrow-' + arrowColor]" />
      <!-- #endif -->
      <!-- #ifdef APP-NVUE -->
      <text v-if="arrow" class="iconfont margin-left-20" :class="['tbb-arrow-' + arrowColor]">&#xe688;</text>
      <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  name: 'TuiListCell',
  props: {
    // 是否有箭头
    arrow: {
      type: Boolean,
      default: false
    },
    // 箭头颜色 传值： white，gray,warning,danger
    arrowColor: {
      type: String,
      default: 'gray'
    },
    // 是否有点击效果
    hover: {
      type: Boolean,
      default: true
    },
    // 隐藏线条
    unlined: {
      type: Boolean,
      default: false
    },
    // 线条是否有左偏移距离
    lineLeft: {
      type: Boolean,
      default: true
    },
    // 线条是否有右偏移距离
    lineRight: {
      type: Boolean,
      default: true
    },
    padding: {
      type: String,
      default: '32rpx 28rpx'
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    // 字体大小
    size: {
      type: Number,
      default: 28
    },
    // 字体颜色
    color: {
      type: String,
      default: '#333'
    },
    // 是否加圆角
    radius: {
      type: Boolean,
      default: false
    },
    // 箭头是否有偏移距离
    arrowRight: {
      type: Boolean,
      default: true
    },
    index: {
      type: Number,
      default: 0
    },
    height: {
      type: String,
      default: ''
    },
    borderRadius: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', {
        index: this.index
      })
    }
  }
}
</script>

<style scoped lang="scss">
.tui-list-cell {
	position: relative;
  /*#ifndef APP-NVUE*/
  width:100%;
	box-sizing: border-box;
  /*#endif*/
}
.tui-radius {
	border-radius: 6rpx;
	overflow: hidden;
}

/*#ifndef APP-NVUE*/
.tui-list-cell::after {
	content: '';
	position: absolute;
	border-bottom: 4rpx solid $color-border;
	-webkit-transform: scaleY(0.5) translateZ(0);
	transform: scaleY(0.5) translateZ(0);
	transform-origin: 0 100%;
	bottom: 0;
	right: 0;
	left: 0;
	pointer-events: none;
}
/*#endif*/

/*#ifndef APP-NVUE*/
.tui-line-left::after {
	left: 28rpx !important;
}

.tui-line-right::after {
	right: 28rpx !important;
}

.tui-cell-unlined::after {
	border-bottom: 0 !important;
}
/*#endif*/

.tbb-arrow-white {
  color:$font-color-white;
}
.tbb-arrow-gray{
  color:$font-color-t3;
}
.tbb-arrow-warning{
  color:$color-warning;
}
.tbb-arrow-danger{
  color:$color-error;
}
.tbb-arrow-success{
  color:$color-success;
}
.tbb-arrow-black{
  color:$font-color-black;
}
.tbb-arrow-secondary{
  color:$color-secondary;
}
.tbb-arrow-primary{
  color:$color-primary;
}
.tui-list-box{
  padding:22rpx 28rpx;
}
</style>
